<template>
	<view>
		<view class="content">
			<view class="out-edit-box">
				<view v-if="useType==1" class="inner-edit-box">
					<view class="base-box" v-show="!content" v-html="msg"></view>
					<textarea class="base-box" maxlength="5000" @input="bindInput"></textarea>
				</view>
				<view class="comput-num">
					{{num}}/5000
				</view>

				<editor :read-only="num>=5000" @ready="onEditorReady" id="editor" v-if="useType==2" class="inner-edit-box"
				 :placeholder="msg2" @input="bindInput2"></editor>
			</view>
		</view>
		<view class="bottom-btn">
			<button @click="makeSure">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				useType: 2,
				msg: "请详细清晰地描述职位要求能获得更多人关注<br/>不能填写QQ、微信、电话等联系方式<br/><br/>1.岗位职责<br/>2.工作要求<br/>3.其他信息（福利待遇等）",
				msg2: "请详细清晰地描述职位要求能获得更多人关注\n不能填写QQ、微信、电话等联系方式\n\n1.岗位职责\n2.工作要求\n3.其他信息（福利待遇等）",
				content: "",
				num: 0
			}
		},
		methods: {
			// 确认操作
			makeSure() {
				uni.setStorageSync("content", this.content)
				uni.navigateBack({
					delta: 1
				})
			},

			// 普通textarea输入时候
			bindInput(e) {
				[this.content, this.num] = [e.detail.value, e.detail.cursor]
			},

			// editor输入的时候
			bindInput2(e) {
				[this.content, this.num] = [e.detail, e.detail.text.length - 1]
			},

			// 编辑器初始化完成的时候
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context(res => {
					this.editorCtx = res.context;
					if (this.content) {
						this.editorCtx.setContents(this.content)
					}
				}).exec()
			}
		},
		onLoad() {
			this.content = uni.getStorageSync("content") ? uni.getStorageSync("content") : ""
		},

	}
</script>

<style>
	.bottom-btn {
		height: 176rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-btn button {
		background: #1B82FE;
		box-shadow: 0 8rpx 12rpx -2rpx rgba(0, 98, 216, 0.30);
		border-radius: 8rpx;
		border-radius: 8rpx;
		width: 368rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.content {
		padding: 16rpx 30rpx;
		box-sizing: border-box;
		height: calc(100vh - 176rpx);
	}

	.comput-num {
		font-size: 28rpx;
		color: rgba(4, 3, 25, 0.4);
		line-height: 28rpx;
		text-align: right;
		position: absolute;
		right: 32rpx;
		bottom: 32rpx;
	}

	.out-edit-box {
		background: #FFFFFF;
		box-shadow: inset 0 0 15rpx 0 rgba(3, 24, 50, 0.20);
		border-radius: 8rpx;
		width: 100%;
		height: 100%;
		position: relative;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.inner-edit-box {
		width: 100%;
		height: calc(100vh - 332rpx);
		position: relative;
		box-sizing: border-box;
		color: rgba(4, 3, 25, 0.4);
		font-size: 28rpx;
		color: rgba(4, 3, 25, 0.4);
		line-height: 46rpx;
	}

	.base-box {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 28rpx;
		color: rgba(4, 3, 25, 0.4);
		line-height: 46rpx;
	}

	textarea.base-box {
		background: transparent;
	}
</style>
